// 简化版滚动条宽度计算器
// 减少控制台输出和频繁更新

class SimpleScrollbarCalculator {
  constructor() {
    this.scrollbarWidth = 0
    this.viewportWidth = 0
    this.isInitialized = false
    this.init()
  }

  // 计算滚动条宽度
  calculateScrollbarWidth() {
    const outer = document.createElement('div')
    outer.style.cssText =
      'visibility:hidden;overflow:scroll;position:absolute;top:-99999px;width:100px;height:100px'
    document.body.appendChild(outer)

    const inner = document.createElement('div')
    inner.style.width = '100%'
    outer.appendChild(inner)

    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
    document.body.removeChild(outer)

    return scrollbarWidth
  }

  // 更新CSS自定义属性（静默模式）
  updateCSSVariables() {
    const scrollbarWidth = this.calculateScrollbarWidth()
    const viewportWidth = window.innerWidth - scrollbarWidth

    // 只有值发生变化时才更新
    if (this.scrollbarWidth !== scrollbarWidth || this.viewportWidth !== viewportWidth) {
      this.scrollbarWidth = scrollbarWidth
      this.viewportWidth = viewportWidth

      // 更新CSS自定义属性
      document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`)
      document.documentElement.style.setProperty('--viewport-width', `${viewportWidth}px`)

      // 只在首次初始化时输出日志
      if (!this.isInitialized) {
        console.log('📏 滚动条计算器初始化完成')
        this.isInitialized = true
      }
    }
  }

  // 简化初始化
  init() {
    if (this.isInitialized) return

    // 立即计算一次
    this.updateCSSVariables()

    // 只监听窗口大小变化，移除DOM变化监听以减少干扰
    const resizeHandler = () => {
      this.updateCSSVariables()
    }

    window.addEventListener('resize', resizeHandler, { passive: true })

    // 页面加载完成后再次更新
    if (document.readyState === 'loading') {
      document.addEventListener(
        'DOMContentLoaded',
        () => {
          this.updateCSSVariables()
        },
        { once: true },
      )
    }

    window.addEventListener(
      'load',
      () => {
        this.updateCSSVariables()
      },
      { once: true },
    )
  }

  // 获取当前值
  getScrollbarWidth() {
    return this.scrollbarWidth
  }

  getViewportWidth() {
    return this.viewportWidth
  }
}

// 单例模式
let instance = null

export function getScrollbarCalculator() {
  if (!instance) {
    instance = new SimpleScrollbarCalculator()
  }
  return instance
}

export default getScrollbarCalculator()
